<template>
	<view class="page">
		<!-- 退款状态栏 -->
		<view class="refund-status">
			<view class="status-text">
				<text class="status-title">退款中</text>
				<text class="status-desc">还剩24小时56分确认</text>
			</view>
			<image class="status-icon" src="/static/svg/refund-timer.svg"></image>
		</view>
		
		<!-- 用户信息 -->
		<view class="user-info">
			<view class="user-location">
				<image class="location-icon" src="/static/svg/location-icon.svg"></image>
				<view class="user-details">
					<view class="user-name-phone">
						<text class="user-name">李小花</text>
						<text class="user-phone">1885138766</text>
					</view>
					<text class="user-address">广东省广州市大华区明离路科技园880号</text>
				</view>
			</view>
		</view>
		
		<!-- 拼团信息 -->
		<view class="group-info">
			<view class="group-status">
				<image class="group-icon" src="/static/svg/group-tag.svg"></image>
				<text class="group-text">拼团成功</text>
			</view>
			<view class="group-members">
				<view class="leader">
					<image class="member-avatar" src="/static/svg/default-avatar.svg"></image>
					<text class="leader-tag">团长</text>
				</view>
				<view class="member">
					<image class="member-avatar" src="/static/svg/default-avatar.svg"></image>
				</view>
			</view>
			<button class="group-detail-btn">拼团详情</button>
		</view>
		
		<!-- 商品信息 -->
		<view class="product-info">
			<view class="product-card">
				<image class="product-image" src="/static/svg/matcha-cake.svg"></image>
				<view class="product-details">
					<text class="product-name">艾丽苏抹茶蛋糕早点低糖健康</text>
					<text class="product-spec">实惠装</text>
					<view class="product-price-quantity">
						<text class="product-price">¥136</text>
						<text class="product-quantity">×1</text>
					</view>
				</view>
			</view>
			<view class="group-tag-label">3人团</view>
		</view>
		
		<!-- 订单金额信息 -->
		<view class="order-info">
			<view class="info-item">
				<text class="info-label">商品总额：</text>
				<text class="info-value">¥136.00</text>
			</view>
			<view class="info-item">
				<text class="info-label">运费：</text>
				<text class="info-value">¥0.00</text>
			</view>
			<view class="info-item">
				<text class="info-label">商品优惠：</text>
				<text class="info-value">-¥10.00</text>
			</view>
			<view class="divider"></view>
			<view class="info-item total">
				<text class="info-label">实付款：</text>
				<text class="info-value price">¥126.00</text>
			</view>
		</view>
		
		<!-- 订单信息 -->
		<view class="order-details">
			<view class="info-item">
				<text class="info-label">订单号：</text>
				<text class="info-value">4186283277</text>
			</view>
			<view class="info-item">
				<text class="info-label">下单时间：</text>
				<text class="info-value">2019-02-16 15:36:25</text>
			</view>
			<view class="info-item">
				<text class="info-label">付款时间：</text>
				<text class="info-value">2019-02-16 16:36:25</text>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="footer">
			<button class="refund-progress-btn">退款进度</button>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 页面数据
const orderInfo = ref({
	orderNumber: '4186283277',
	orderTime: '2019-02-16 15:36:25',
	payTime: '2019-02-16 16:36:25',
	refundDeadline: '24小时56分',
	status: '退款中',
	product: {
		name: '艾丽苏抹茶蛋糕早点低糖健康',
		spec: '实惠装',
		price: 136,
		count: 1
	},
	group: {
		size: 3,
		status: '拼团成功'
	},
	totalAmount: 136.00,
	shipping: 0.00,
	discount: 10.00,
	finalAmount: 126.00
});

const userInfo = ref({
	name: '李小花',
	phone: '1885138766',
	address: '广东省广州市大华区明离路科技园880号'
});

onMounted(() => {
	// 页面加载时可以从服务器获取最新的订单数据
	// fetchOrderInfo();
});
</script>

<style>
.page {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 100rpx;
}

.refund-status {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx;
	background-color: #ff6a3c;
	color: #ffffff;
}

.status-title {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.status-desc {
	font-size: 28rpx;
	display: block;
}

.status-icon {
	width: 100rpx;
	height: 100rpx;
}

.user-info {
	background-color: #ffffff;
	padding: 30rpx;
	margin-top: 20rpx;
}

.user-location {
	display: flex;
	align-items: flex-start;
}

.location-icon {
	width: 60rpx;
	height: 60rpx;
	margin-right: 20rpx;
}

.user-details {
	flex: 1;
}

.user-name-phone {
	display: flex;
	margin-bottom: 10rpx;
}

.user-name {
	font-size: 30rpx;
	font-weight: bold;
	margin-right: 20rpx;
}

.user-phone {
	font-size: 28rpx;
	color: #999;
}

.user-address {
	font-size: 28rpx;
	color: #666;
	line-height: 1.4;
}

.group-info {
	background-color: #ffffff;
	padding: 30rpx;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.group-status {
	display: flex;
	align-items: center;
}

.group-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 10rpx;
}

.group-text {
	font-size: 28rpx;
	color: #333;
}

.group-members {
	display: flex;
	align-items: center;
}

.leader, .member {
	position: relative;
	margin: 0 5rpx;
}

.member-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}

.leader-tag {
	position: absolute;
	bottom: -10rpx;
	left: 50%;
	transform: translateX(-50%);
	background-color: #ff6a3c;
	color: white;
	font-size: 20rpx;
	padding: 2rpx 10rpx;
	border-radius: 20rpx;
}

.group-detail-btn {
	background-color: #ffffff;
	color: #ff6a3c;
	font-size: 24rpx;
	border: 1px solid #ff6a3c;
	border-radius: 30rpx;
	padding: 10rpx 20rpx;
}

.product-info {
	background-color: #ffffff;
	padding: 30rpx;
	margin-top: 20rpx;
	position: relative;
}

.product-card {
	display: flex;
	position: relative;
	padding-left: 20rpx;
}

.product-image {
	width: 160rpx;
	height: 160rpx;
	margin-right: 20rpx;
	border-radius: 8rpx;
}

.product-details {
	flex: 1;
}

.product-name {
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.product-spec {
	font-size: 26rpx;
	color: #888;
	margin-bottom: 40rpx;
	display: block;
}

.product-price-quantity {
	display: flex;
	justify-content: space-between;
}

.product-price {
	font-size: 32rpx;
	font-weight: bold;
	color: #ff6a3c;
}

.product-quantity {
	font-size: 28rpx;
	color: #888;
}

.group-tag-label {
	position: absolute;
	left: 0;
	top: 0;
	background-color: #ff6a3c;
	color: white;
	font-size: 24rpx;
	padding: 4rpx 16rpx;
	border-radius: 0 0 8rpx 0;
}

.order-info, .order-details {
	background-color: #ffffff;
	padding: 30rpx;
	margin-top: 20rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.info-label {
	font-size: 28rpx;
	color: #666;
}

.info-value {
	font-size: 28rpx;
	color: #333;
}

.price {
	color: #ff6a3c;
	font-weight: bold;
	font-size: 32rpx;
}

.divider {
	height: 1px;
	background-color: #eee;
	margin: 20rpx 0;
}

.total {
	font-weight: bold;
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #ffffff;
	padding: 20rpx;
	display: flex;
	justify-content: flex-end;
	border-top: 1px solid #eee;
}

.refund-progress-btn {
	background-color: #ffffff;
	color: #ff6a3c;
	font-size: 28rpx;
	border: 1px solid #ff6a3c;
	border-radius: 40rpx;
	padding: 15rpx 40rpx;
}
</style>
